<template>
<div>
     <Button type="primary" @click="modal1 = true">添加数据</Button>
    <Table border :columns="columns" :data="list" ref="selection">
         <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            @click.prevent.native="handleCheckAll">全选</Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label=""></Checkbox>
        <Checkbox label=""></Checkbox>
        <Checkbox label=""></Checkbox>
    </CheckboxGroup>
    </Table>
    <Page :total="total" show-sizer @on-change="onChangePage"/>
       <Modal
        v-model="modal1"
        title="添加用户"
        @on-ok="ok"
        @on-cancel="cancel">
         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
            <Input v-model="formValidate.password" placeholder="Enter your password"></Input>
        </FormItem>
        <FormItem label="性别" prop="gender">
            <RadioGroup v-model="formValidate.gender">
                <Radio label="male">男</Radio>
                <Radio label="female">女</Radio>
            </RadioGroup>
        </FormItem>
          <FormItem label="年龄" prop="age">
            <Input v-model="formValidate.age" placeholder="Enter your age"></Input>
        </FormItem>
          <FormItem label="身高" prop="height">
            <Input v-model="formValidate.height" placeholder="Enter your height"></Input>
        </FormItem>
          <FormItem label="体重" prop="weight">
            <Input v-model="formValidate.weight" placeholder="Enter your weight"></Input>
        </FormItem>
         <FormItem label="爱好" prop="like">
            <CheckboxGroup v-model="formValidate.like">
                <Checkbox label="iphone"></Checkbox>
                <Checkbox label="ipad"></Checkbox>
                <Checkbox label="macbook"></Checkbox>
                <Checkbox label="airpods"></Checkbox>
            </CheckboxGroup>
        </FormItem>
         <FormItem label="成绩" prop="results">
            <Input v-model="formValidate.results" placeholder="Enter your results"></Input>
        </FormItem>
         <FormItem label="国籍" prop="country">
            <Select v-model="formValidate.country" placeholder="Select your country">
                <Option value="China">China</Option>
                <Option value="Japan">Japan</Option>
                <Option value="America">America</Option>
            </Select>
        </FormItem>
        <FormItem label="城市" prop="city">
            <Select v-model="formValidate.city" placeholder="Select your city">
                <Option value="Hangzhou">Hangzhou</Option>
                <Option value="Hongkong">Hongkong</Option>
                <Option value="Tokyo">Tokyo</Option>
                <Option value="New York">New York</Option>
            </Select>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit(id)">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </Modal>
</div>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    password: '',
                    gender: '',
                    age: '',
                    height:'',
                    weight:'',
                    like: [],
                    results: '',
                    country:'',
                    city:''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' },
                    ],
                    gender: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                     age: [
                        { required: true, message: 'The age cannot be empty', trigger: 'blur' },
                    ], 
                    height: [
                        { required: true, message: 'The height cannot be empty', trigger: 'blur' },
                    ], 
                    weight: [
                        { required: true, message: 'The weight cannot be empty', trigger: 'blur' },
                    ],
                     like: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                      results: [
                        { required: true, message: 'The results cannot be empty', trigger: 'blur' },
                    ],
                     country: [
                        { required: true, message: 'Please select the country', trigger: 'change' }
                    ],
                    city: [
                        { required: true, message: 'Please select the city', trigger: 'change' }
                    ]
                },

                columns: [
                    {
                        title: '姓名',
                        key: 'name',
                        width:100,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '密码',
                        key: 'password',
                        width:120
                    },
                    {
                        title: '性别',
                        key: 'sex'
                    },
                     {
                        title: '年龄',
                        key: 'age'
                    },
                      {
                        title: '身高',
                        key: 'height'
                    },  {
                        title: '体重',
                        key: 'weight'
                    },  {
                        title: '爱好',
                        key: 'like',
                        width: 200
                    },  {
                        title: '成绩',
                        key: 'results'
                    },  {
                        title: '国籍',
                        key: 'country'
                    },  {
                        title: '城市',
                        key: 'city',
                        width:100
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width:  140,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row._id)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                list:[],
                rows: 10,
                total:0,
                page:1,
                modal1: false,
                id:''
            }
        },
        methods: {
              ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                Object.assign(this.$data.formValidate,this.$options.data().formValidate)
            },
            handleSubmit (id) {
                var formData=this.formValidate;
                        if(formData._id){
                            this.axios({
                            url:`http://localhost:3000/users/${formData._id}`,                            
                            method:'put',
                            data:formData
                            }).then(res=>{
                            this.getList();
                            this.modal1=false;
                            });
                        }else{
                        this.axios({
                            url:'http://localhost:3000/users',
                            method:'post',
                            data:formData
                        }).then(res=>{
                            this.getList();
                            this.modal1=false;
                            });
                        }       
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            getList(){
                this.axios({
                    url:'http://localhost:3000/users/list',
                    method:'post',
                    data:{
                        rows:this.rows,
                        page:this.page
                    }
                }).then(res=>{
                   this.list=res.data.rows;
                   this.total=res.data.total;
                })
            },
            onChangePage(page){
                this.page=page;
                this.getList();
            },
            editData (id) {
                 this.axios({
                     url:`http://localhost:3000/users/${id}`,
                     method:'get'
                 }).then(res=>{
                     this.formValidate=res.data;
                     this.modal1=true;
                 })
            },
            remove (id) {
                 this.$Modal.confirm({
                    title: '确认删除?',
                    content: '<p>are you sure?</p>',
                    onOk: () => {
                        this.$Message.info('Clicked ok');
                       this.axios({
                           url:`http://localhost:3000/users/${id}`,
                           method:'delete'
                       }).then(res=>{
                           this.getList();
                       })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });
                
            }
        },
        mounted(){
            this.getList();
        }
    }
</script>

